<template>
  <div class="payment-result">
    <n-card title="支付结果" class="result-card">
      <n-result
        :status="orderInfo.status === 'PAID' ? 'success' : 'error'"
        :title="orderInfo.status === 'PAID' ? '支付成功' : '支付失败'"
        :description="getResultDescription()"
      >
        <template #footer>
          <n-space justify="center">
            <n-button @click="goToOrders">
              查看订单
            </n-button>
            <n-button type="primary" @click="goToHome">
              返回首页
            </n-button>
          </n-space>
        </template>
      </n-result>

      <n-divider />

      <n-descriptions bordered size="small">
        <n-descriptions-item label="订单号">
          {{ orderInfo.orderNo }}
        </n-descriptions-item>
        <n-descriptions-item label="服务类型">
          {{ orderInfo.serviceType }}
        </n-descriptions-item>
        <n-descriptions-item label="支付金额">
          ¥ {{ orderInfo.amount }}
        </n-descriptions-item>
        <n-descriptions-item label="创建时间">
          {{ formatDate(orderInfo.createTime) }}
        </n-descriptions-item>
        <n-descriptions-item label="支付时间" v-if="orderInfo.payTime">
          {{ formatDate(orderInfo.payTime) }}
        </n-descriptions-item>
        <n-descriptions-item label="订单状态">
          <n-tag :type="getStatusType(orderInfo.status)">
            {{ getStatusText(orderInfo.status) }}
          </n-tag>
        </n-descriptions-item>
      </n-descriptions>
    </n-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useMessage } from 'naive-ui'
import { getOrderDetail } from '@/api/payment'
import { formatDate } from '@/utils/format'

const route = useRoute()
const router = useRouter()
const message = useMessage()

const orderNo = ref(route.params.orderNo)
const orderInfo = ref({})

// 获取订单详情
const getOrder = async () => {
  try {
    const res = await getOrderDetail(orderNo.value)
    if (res.code === 0) {
      orderInfo.value = res.data
    }
  } catch (error) {
    message.error('获取订单信息失败')
  }
}

// 获取结果描述
const getResultDescription = () => {
  if (orderInfo.value.status === 'PAID') {
    if (orderInfo.value.serviceType === 'MEMBERSHIP') {
      return '会员服务已开通，请刷新页面查看最新状态'
    }
    return '您的订单已支付成功，我们将尽快为您处理'
  }
  return '支付未完成，请重新尝试或联系客服'
}

// 获取状态类型
const getStatusType = (status) => {
  const statusMap = {
    'PENDING': 'warning',
    'PAID': 'success',
    'CANCELLED': 'error'
  }
  return statusMap[status] || 'default'
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    'PENDING': '待支付',
    'PAID': '已支付',
    'CANCELLED': '已取消'
  }
  return statusMap[status] || status
}

// 跳转到订单列表
const goToOrders = () => {
  router.push('/orders')
}

// 跳转到首页
const goToHome = () => {
  router.push('/')
}

onMounted(() => {
  getOrder()
})
</script>

<style scoped>
.payment-result {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.result-card {
  margin-top: 20px;
}
</style>
